@charset "UTF-8";
@import "../common/scss/mobile";
@import "../common/scss/mixins";
@import "../common/scss/coupons";
@import "../common/scss/sprites";
body{
	height:100%;
}
body{
  background-color:#f0f2f4;
}
.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
   @include flexbox;
   @include property-transform;
   @include content-box;
}
.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}
.nav-container {
  .swiper-slide{
      text-align:center;
      font-size:$fs15;
      color:$color00;
      &.active-nav{
        color:$color05;
      }
  }
}
.page-coupon{
  padding:$fs14;

  .coupon-list{
     .item-wrap{  
		.ticket-item{
			@include flexbox;
			height:9rem;
			margin-bottom:1rem;
			border:1.5px solid #d3d3d3;
			background-color:$bg00;
			overflow:hidden;
			@include radius(1rem);
			.ticket-type{
				text-align:center;
				width:10rem;
				background-color:$bg05;
				color:$color10;
				.ticket-price{
				    padding-top: 1.5rem;
					padding-bottom:0.3rem;
				}
				strong{
				   font-size:3.5rem;
				   line-height: 3.5rem;
				   vertical-align: baseline; 
				   letter-spacing:-0.05em; 
				   sub{
						letter-spacing: 0.05em; 
				   }
				}
				sub{
				    vertical-align: baseline; 
					font-size:$fs15;
				}
				.ticket-name{
					border-top:1px solid rgba(235,49,95,.7);
					width:8rem;
					padding-top:0.2rem;
					margin:0 auto;
				}
			}
			&.coin{
				.ticket-type{
					.ticket-price{
						padding-top: 0;
					}
				}
			}
			.ticket-info{
				position:relative;
				@include flex-grow(1);
				.figure{
					position:absolute;
					left:-1px;
					top:0;
					width:1rem;
					height:100%;
					@include bm-mask('/images/shading.png');
					background-color:$bg05;
				}
                .timemark{
					position:absolute;
					right:0;
					top:0;
					width:3.6rem;
					height:3.6rem;
				}
				color:$color01;
				.ticket-title,.ticket-validity{
					padding-left:2rem;
				}
				.ticket-title{
					color:$color03;
					font-size:$fs15;	
					padding-top: 2rem;
					padding-bottom: 0.6rem;				
				}
			}
			&.ineffective{
				.timemark{
				   background:url(/images/ineffective.png) no-repeat right top;
				   background-size:100%;
				}
			}
			&.coin{
				.ticket-type,.figure{
					background-color:#fea930;
				}
				.ticket-name{
					border-top:1px solid #e29322;
				}
			}
			&.expired,&.freeze{
				.ticket-type,.figure{
					background-color:#bfbfbf;
				}
				.ticket-name{
					border-top:1px solid #adadad;
				}
			}
			&.expired{
				.timemark{
				   background:url(/images/expired.png) no-repeat right top;
				   background-size:100%;
				}
			}
		}
     }
	 .icon-exchange{
		@include mix-exchange();
		    margin-top: 1.4rem;
			margin-bottom:1rem;
	 }
     .no-data{
        text-align:center;
        padding-top:17.4rem;
        font-size:$fs15;
        color:$color01;
     }
  }

}


@import "../common/scss/utilities";
